<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            .parent {
                perspective: 1100px;
            }
            .box {
                position: relative;
                width: 200px;
                margin: 200px auto;
                transform-style: preserve-3d;
                transition: transform 1s;
                /*transform: perspective(600px);*/
                transform-origin: center;
            }
            img {
                position: absolute;
                width: 200px;
                height: 145px;
            }
            img:first-of-type {
                transform: translateZ(195px)
            }
            img:nth-of-type(2) {
                transform: rotateY(60deg) translateZ(195px);
            }
            img:nth-of-type(3) {
                transform: rotateY(120deg) translateZ(195px);
            }
            img:nth-of-type(4) {
                transform: rotateY(180deg) translateZ(195px);
            }
            img:nth-of-type(5) {
                transform: rotateY(240deg) translateZ(195px);
            }
            img:nth-of-type(6) {
                transform: rotateY(300deg) translateZ(195px);
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="box">
                <img src="image/timg%20(1).jpg" alt=""/>
                <img src="image/timg%20(2).jpg" alt=""/>
                <img src="image/timg%20(3).jpg" alt=""/>
                <img src="image/timg%20(4).jpg" alt=""/>
                <img src="image/timg%20(5).jpg" alt=""/>
                <img src="image/timg%20(6).jpg" alt=""/>
            </div>
        </div>
        <script>
            var box = document.querySelector('.box');
            var tmp = 0;
            box.onclick = function(){
                tmp -= 60;
                this.style.transform = 'rotate3d(0,1,0,'+tmp+'deg)';
            }
        </script>
    </body>
</html>